<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html,
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
        #juli{
            position: fixed;
            z-index: 99;
            font-size: 26px;
            right: 10px;
            top: 30px;
        }
    </style>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=QWCBZ-MG26P-QNNDD-VLXUT-VJSPT-NVBLG"></script>
    <script charset="utf-8" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
    <script charset="utf-8"
        src="https://map.qq.com/api/js?v=2.exp&key=QWCBZ-MG26P-QNNDD-VLXUT-VJSPT-NVBLG&libraries=geometry"></script>
    <title>总路程</title>
</head>

<body>
    <div id="allmap"></div>
    <span id='juli'></span>
</body>

</html>
<script type="text/javascript">
    var porints = '{:json_encode($admin)}';
    console.log(porints);
    porints=JSON.parse(porints);
    var map, markersArray = [], route_lines = [];            // 创建Map实例
    var center = new qq.maps.LatLng(porints[0]['xy'][1], porints[0]['xy'][0]);
    var map = new qq.maps.Map(document.getElementById("allmap"), { center: center, zoom: 16 });
    function showPoly(pointList) {
        for (var i = 0; i < pointList.length; i++) {
            var start = i; var end = i + 1;
            if (!pointList[end]) return;
            var driving = new qq.maps.DrivingService({
                complete: function (response) {
                    directions_routes = response.detail.routes;
                    //所有可选路线方案
                    for (var i = 0; i < directions_routes.length; i++) {
                        var route = directions_routes[i];
                        //map.fitBounds(response.detail.bounds); //调整地图窗口显示所有路线
                        var polyline = new qq.maps.Polyline(
                            {
                                path: route.path,
                                strokeColor: '#3893F9',
                                strokeWeight: 6,
                                map: map
                            }
                        ); route_lines.push(polyline);
                    }
                }
            });
            driving.search(pointList[start], pointList[end]); //waypoints表示途经点
        }
    }
    function makemarker(center, name, i) {
        var marker = new qq.maps.Marker({ position: center, map: map });// 创建标注
        markersArray.push(marker);
        qq.maps.event.addListener(marker, 'click', function showPosition(position) {
            let lat = center.lat;
            let lng = center.lng;
            // 逆地址解析(经纬度到地名转换过程)
            geocoder = new qq.maps.Geocoder({
                complete: function (res) {
                    var label = new qq.maps.Label({
                        content: res.detail.nearPois[0].name, map: map,
                        offset: new qq.maps.Size(10, -50),
                        position: center,
                    });
                }
            });
            latLng = new qq.maps.LatLng(lat, lng);
            geocoder.getAddress(latLng);
        })
    }
    var count2 = 0
    function count() {
        for (var i = 0; i < porints.length - 1; i++) {
            if (i < porints.length - 1) {
                var start = new qq.maps.LatLng(porints[i].xy[0], porints[i].xy[1]), end = new qq.maps.LatLng(porints[i + 1].xy[0], porints[i + 1].xy[1]);
                count2 += Math.round(qq.maps.geometry.spherical.computeDistanceBetween(start, end) * 10) / 10
            }
        }
        // document.getElementById("juli").innerHTML = "<span>总路程:"+ Math.floor((count2/100) * 100) / 100+"km</span>"
    }
    var arrayList = [];
    for (var i = 0 in porints) {
        var p = porints[i].xy;
        var p1 = new qq.maps.LatLng(p[1], p[0]);
        arrayList.push(p1);
        makemarker(p1, porints[i].name, i);
    }
    count()
    showPoly(arrayList);//显示轨迹
</script>